<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/gker.png">
                <span>极氪商城后台管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <!--侧边栏区域-->
            <el-aside :width="isCollapse ? '64px' :'200px'">
                <div class="toggle-button" @click="toggleCollapse"><-></div>
                <el-menu
                        background-color="#fff"
                        text-color="#000"
                        active-text-color="#409eff"
                        :unique-opened=true
                        :collapse=isCollapse
                        router
                        :default-active=activePath>
                    <!--一级菜单-->
                    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState(subItem.path)">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

    export default {
        created() {
            this.menuList = this.$conf.navBar
            this.activePath = window.sessionStorage.getItem('activePath')
        },
        data() {
            return {
                //左侧菜单数据
                menuList:[],
                isCollapse:false,
                activePath:''
            }
        },
        methods: {
            logout() {
                window.sessionStorage.clear()
                this.$router.push('/login')
            },
            //折叠菜单栏
            toggleCollapse(){
                this.isCollapse = !this.isCollapse
            },
            //保存链接状态
            saveNavState(activePath){
                window.sessionStorage.setItem('activePath',activePath)
                this.activePath = activePath
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-header {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #252525;
        font-size: 20px;

        > div {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
                font-size: 24px;
                font-weight: bold;
            }
            img{
              width: 60px;
              height: 60px;
            }
        }
    }

    .el-aside {
        background-color: #ffffff;
        transition: width 0.3s;
        .el-menu{
            border-right: none;
        }
    }

    .el-main {
        background-color: #eaedf1;
    }

    .home-container {
        height: 100%;
    }
    .toggle-button{
        background-color: #4a5064;
        color: #fff;
        font-size: 10px;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
</style>
